<template>
  <div class="about">
    <div class="center">
        <div class="header ">
            <div class="logo">
              <img class="logo-img" src="../assets/images/logo.svg" alt="">
            </div>
            <div class="state-change">
                <p>login</p>
                <p>logout</p>
            </div>
        </div>

        <div class="nav-index">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>


        <div class="sort-right">
            <div class="default">
                <div>sort by:</div>
                <div @click="handleDefault">default</div>
                <div @click="handleSort(isTop)">Price 
                    <i :class="isTop ? 'el-icon-top' : 'el-icon-bottom'">
                        <!-- {{(sortFlag==1)?'&#xe62b;':'&#xe62a;'}} -->
                    </i>
                </div>
            </div>
        </div>

        <el-container  class="div-list">
        <el-container>
            <el-aside width="200px" class="price">
                <div>P r i c e</div>
                <div v-for="item of prices" :key="item.id">
                    <div @click="handlePrice(item)">{{item.min}}-{{item.max}}</div>
                </div>
            </el-aside>
            <el-main class="sec-list">
                <Goods :goods="goods"></Goods>
            </el-main>
            
        </el-container>
            <el-footer>
                <el-pagination
                @current-change="handleCurrentChange"
                small
                layout="prev, pager, next"
                :total="sum">
                </el-pagination>
            </el-footer>
        </el-container>
        
    
    </div>
  </div>
</template>
<script>
import Goods from '../components/Goods'
export default {
    data() {
        return {
            prices:[{min:0,max:100},{min:100,max:500},{min:500,max:1000},{min:1000,max:5000}],
            isTop:true,
            goods:[],
            // sortFlag: 1,
            total:17
        }
    },
    components:{
        Goods,
    },
    computed:{
        sum(){
            var sum = 0
            for(var i=0;i<this.total;i+=8){
                sum+=10;
            }
            return sum;
        }
    },
    mounted() {
        this.initData()
    },
    methods: {
        initData(){
            this.$http.get("/api/goods").then(res=>{
                this.goods = res.data.res
            })
        },
        handleDefault(){
            this.initData()
        },
        handleSort(isTop) {
            console.log(isTop);
            this.isTop = !isTop;
            var sort = 0;
            if(this.isTop==true){
                sort = 1
            }else sort = -1
            console.log(sort);
            this.$http.get(`/api/sort?price=${sort}`).then((res) => {
                console.log(res.data.res);
                this.goods = res.data.res
            });
        },
        handlePrice(price) {
        // console.log(price.min);
            var {min,max} = price;
            this.$http.get(`/api/goods?min=${min}&max=${max}`).then((res) => {
                console.log(res.data.res);
                this.goods = res.data.res
            });
        },
        handleCurrentChange(val) {
            var offset = (val-1)*8;
            this.$http.get(`/api/goods?limit=8&offset=${offset}`).then((res) => {
                console.log(res.data.res);
                this.goods = res.data.res
            });
        }
    },
}
</script>
<style scoped>
.center{
  width: 80%;
  margin: 0 auto;
}
.header{
  width: 100%;
  display: flex;
  height: 60px;
  justify-content: space-between;
  line-height: 60px;
  background-color: #eee;
}
.logo{
  width: 60px;
  margin-top: 10px;
}
.logo-img{
  width: 40px;
  height: 40px;
}
.state-change{
  width: 150px;
  height: 60px;
  display: flex;
  justify-content: space-evenly;
}
.nav-index{
    margin: 10px auto;
}
.sort-right{
    position: relative;
    height: 60px;
    line-height: 60px;
    background-color: #eee;
}
.default{
    position: absolute;
    right: 0;
    width: 180px;
    display: flex;
    justify-content: space-evenly;
}

.div-list{
    margin: 30px auto;
}
.price div{
    margin: 20px auto;
    width: 200px;
    text-align: center;
}
.image .img{
    width: 100%;
    height: 100%;
}
.el-pagination{
text-align: center;
    margin: 0 auto;
}
.button{
color: red;
border:1px solid red;
}
</style>
